// function App() {
//   let count = 0;

//   const handleClick = () => {
//     count++;
//     console.log(count);
//   };

//   return (
//     <div>
//       <button onClick={handleClick}>点击次数：{count}</button>
//     </div>
//   );
// }
import { useState } from "react";

function App() {
  // useState(initState)
  // initState 就是 useState 定义状态变量的初始化

  // const { age, name } = { name: 'jack', age: 18 }; 对象的解构赋值, 看key
  // const [c, b, a] = [1, 2, 3]; 数组的解构辅助，看位置（index）

  // useState(initState) 函数返回值是一个数组，数组内有两个值
  // 第一个值：是 useState 定义状态变量
  // 第二个值：更新状态变量的方法（既能更新值，同时会更新用户界面）
  const [count, setCount] = useState(0);

  const handleClick = () => {
    // 原则：尽量不要修改原数据，应该产生一份新数据
    // setCount(++count); // 不好
    setCount(count + 1);

    // count++ // 只更新数据，用户界面不会发生变化。必须要调用方法才行
  };

  return (
    <div>
      <button onClick={handleClick}>点击次数：{count}</button>
    </div>
  );
}

export default App;
